/**
 * 输入域设置
 */
function scInputSetting(){
    var opt = null;
    var com = scCommon.instance();
    var crEle = com.crEle;

    var tab = new scTabx();
    
    /**
     * 属性选项
     */
    var items = [
        {label: "编码(id)：", value: "id", placeholder: "唯一编码，必填，为空则自动生成"}, 
        {label: "名称：", value: "name", placeholder: "可重复"}, 
        {label: "背景文本：", value: "placeholder", placeholder: "默认:输入域"}, 
        {label: "数据源名称：", value: "datasourcename", placeholder: "数据源名称"}, 
        {label: "数据源字段：", value: "datasourcefield", placeholder: "字段名称, 内容取自该字段"}
    ];

    /**
     * 类型选项
     */
    var types = [
        {label: "输入框", value: "input", dropdowntype: "", checked: true},
        {label: "下拉列表", value: "dropdown", dropdowntype: "list"}, 
        {label: "日历", value: "dropdown", dropdowntype: "calendar"}
    ];

    /**
     * 日历选项
     */
    var calendarTypes = [
        {label: "日期时间", value: "datetime", checked: true}, 
        {label: "日期", value: "date"}, 
        {label: "时间", value: "time"}
    ];

    /**
     * 复选选项
     */
    var checkOptions = [
        {label: "只读（表单模式有效）", value: "readonly", checked: false}
    ];

    /**
     * 容器
     */
    var box = null;

    /**
     * 设置参数
     * @param {*} option 
     */
    this.setOption = function(option){
        opt = option;
    }

    /**
     * 创建视图
     */
    this.createView = function(){
        box = crEle(null, "sc-input-setting");
        
        box.appendChild(tab.createView({
            menus: [
                {
                    label: "属性", 
                    value: "", 
                    selected: true,
                    component: {
                        createView: createPropsView.call(this, opt)
                    }
                },
                {
                    label: "脚本", 
                    value: "",
                    component: {
                        createView: createScript.call(this, opt)
                    }
                }
            ]
        }));

        return box;
    }

    /**
     * 创建属性视图
     * @param {*} node
     */
    var createPropsView = function(opt){
        return ()=>{
            var wrap = crEle("div", "sc-input-props");

            var row = null;
            var label = null;
            var input = null;
            var data = opt ? opt.data : null;
    
            var item = null;
            for(let i in items){
                item = items[i];
    
                row = crEle("div", "sc-input-setting-row");
                label = crEle("label");
                input = crEle("input");
                
                label.innerText = item.label;
                input.type = "text";
                input.name = item.value;
                input.placeholder = item.placeholder;
    
                if(data && data[input.name]){
                    input.value = data[input.name];
                }
    
                row.appendChild(label);
                row.appendChild(input);
                wrap.appendChild(row);
            }
    
            row = crEle("div", "sc-input-setting-row");
            label = crEle("label");
    
            label.innerText = "是否只读：";
    
            row.appendChild(label);
            wrap.appendChild(row);
            
            var checkOpt = null;
            
            for(let i in checkOptions){
                checkOpt = checkOptions[i];
    
                label = crEle("label");
                input = crEle("input");
    
                label.innerText = checkOpt.label;
                
                input.name = checkOpt.value;
                input.type = "checkbox";
                input.value = checkOpt.checked;
    
                label.prepend(input);
                row.appendChild(label);
    
                if(checkOpt.description){
                    let desp = crEle("span", "sc-setting-description");
                    desp.innerText = checkOpt.description;
                    row.appendChild(desp);
                }
    
                if(data && data[input.name]){
                    input.checked = data[input.name] === true || data[input.name] === "true";
                }
    
                input.addEventListener("change",(e)=>{
                    e.target.value = e.target.checked;
                });
            }
    
            row = crEle("div", "sc-input-setting-row");
            label = crEle("label");
    
            label.innerText = "显示类型：";
    
            row.appendChild(label);
            wrap.appendChild(row);
            
            var type = null;
    
            for(let i in types){
                type = types[i];
    
                label = crEle("label");
                input = crEle("input");
    
                label.innerText = type.label;
                
                input.name = "type";
                input.type = "radio";
                input.value = type.value;
                
                let input2 = crEle("input");
                input2.style.display = "none";
    
                input2.name = "dropdowntype";
                input2.type = "radio";
                input2.value = type.dropdowntype;
    
                label.prepend(input2);
                label.prepend(input);
    
                if(data && data.type != undefined){
                    input.checked = data.type == input.value && data.dropdowntype == input2.value;
                }else{
                    input.checked = type.checked;
                }
    
                input2.checked = input.checked;
    
                row.appendChild(label);
    
                if(input2.checked && input2.value == "calendar"){
                    setCalendarOptionVisible(wrap, true, row);
                }
            }
    
            row.addEventListener("click", (e)=>{
                let tagName = e.target.tagName.toLowerCase();
                let node = tagName == "label" 
                    ? e.target
                    : tagName == "input" 
                        ? e.target.parentNode 
                        : null;
    
                if(node && node.children[0].checked){
                    node.children[0].nextSibling.checked = true;
                    if(node.children[0].nextSibling.value == "calendar"){
                        setCalendarOptionVisible(wrap, true, row);
                    }else{
                        setCalendarOptionVisible(wrap, false, row);
                    }
                }
            });
    
            return wrap;
        }
    }

    /**
     * 创建脚本视图
     * @param {*} node 
     */
    var createScript = function(opt){
        return ()=>{
            var data = opt ? opt.data : null;
            var wrap = crEle("div", "sc-input-script");

            com.insertScript({
                component: this,
                node: wrap
            }, data, {
                row: "sc-input-setting-row",
            });
    
            return wrap;
        }
    }

    /**
     * 创建日历选项
     * @param {*} show
     * @param beforeRow
     */
    var setCalendarOptionVisible = function(node, show, beforeRow){
        var row = node.querySelector(".sc-view-mode");

        if(row){
            if(show){
                row.style.display = "flex";
            }else{
                row.style.display = "none";
            }
            return;
        }

        if(!show) return;

        row = crEle("div", "sc-input-setting-row,sc-view-mode,sc-row-direction-column");
        row.style.borderRadius = "4px";
        row.style.border = "1px solid #ccc";
        row.style.backgroundColor = "#fff";
        row.style.margin = "5px 5px 10px 5px";
        row.style.padding = "6px 16px";

        var data = opt && opt.data ? opt.data : null;

        for(var i in calendarTypes){
            let type = calendarTypes[i];

            let label = crEle("label");
            let input = crEle("input");
            
            label.innerText = type.label;

            input.name = "viewMode";
            input.type = "radio";
            input.value = type.value;

            if(data && data.viewMode != undefined){
                input.checked = data.viewMode == input.value;
            }else{
                input.checked = type.checked;
            }
            
            label.prepend(input);
    
            row.appendChild(label);
        }

        node.appendChild(row);
    }

    /**
     * 获取设置后的数据
     */
    this.getData = function(){
        var nodes = box.querySelectorAll("input[name],textarea");
        var data = {};
        var node = null;
        
        for(var i = 0; i < nodes.length; i++){
            node = nodes[i];
            if(node.type == "radio"){
                if(node.checked){
                    data[node.name] = node.value;
                }
            }else if(node.type == "checkbox"){
                if(node.value === "true" || node.value === "false"){
                    data[node.name] = node.value === "true";
                }else{
                    if(!data[node.name]){
                        data[node.name] = [];
                    }
                    data[node.name].push(node.value);
                }
            }else{
                data[node.name] = node.value;
            }
        }

        return data;
    }

    /**
     * 通知
     * @param {*} eventType 
     * @param {*} param 
     */
    this.notify = function(eventType, param){
        
    }
}